<script setup lang="ts">
  import IptCaptcha from "./IptCaptcha.vue";
  import SliderPuzzle from "./captcha/SliderPuzzle.vue";
  import SliderBar from "./captcha/SliderBar.vue";
  import { UserNameType, LoginMode } from "./Models";
  import { Validates } from "@bidiao/framework";
  import { useShowDialog } from "@/uses/useInputInfo";

  const dialog = useShowDialog();

  const iptUserNameInfo = useFormElement();
  const iptPassWordInfo = useFormElement();
  const userNameType = ref(UserNameType.UserName);
  const loginMode = ref(LoginMode.Password);
  const token = ref("");
  const captchaCode = ref("");

  function useFormElement(extendsInfo?) {
    const model = ref("");
    const isFocus = ref(false);

    function onFocusIn() {
      isFocus.value = true;
    }
    function onFocusOut() {
      isFocus.value = false;
    }

    return reactive({
      model,
      isFocus,
      onFocusIn,
      onFocusOut,
    });
  }
  function onToggleLoginMode() {
    if (loginMode.value === LoginMode.Password) {
      loginMode.value = LoginMode.Code;
    } else {
      loginMode.value = LoginMode.Password;
    }
    iptPassWordInfo.model = "";
  }
  function onUserNameInput() {
    const value = iptUserNameInfo.model;
    if (Validates.isPhone(value)) {
      userNameType.value = UserNameType.Phone;
    } else if (Validates.isEmail(value)) {
      userNameType.value = UserNameType.Email;
    } else {
      userNameType.value = UserNameType.UserName;
    }
  }

  // 执行请求验证码
  function doRequestCaptchaCode() {
    debugger;
  }
  async function doLogin() {
    dialog.show();

    // const challenge = new Uint8Array(16);
    // crypto.getRandomValues(challenge);
    // const userid = new Uint8Array(16);
    // crypto.getRandomValues(userid);
    // const res2 = await navigator.credentials.create({
    //   publicKey: {
    //     challenge: challenge,
    //     rp: {
    //       // id: "example.com",
    //       name: "匕刁科技",
    //     },
    //     user: {
    //       id: userid,
    //       name: "user",
    //       displayName: "User",
    //     },
    //     pubKeyCredParams: [
    //       {
    //         type: "public-key",
    //         alg: -7, // ES256
    //       },
    //       {
    //         type: "public-key",
    //         alg: -257, // RS256
    //       },
    //     ],
    //     timeout: 60000,
    //     attestation: "none",
    //   },
    //   // signal: new AbortSignal(),
    // });
    // publicKeyCredentialToJSON(res);

    // const res = await navigator.credentials.get({
    //   publicKey: {
    //     challenge: challenge,
    //     timeout: 60000,
    //     // rpId: "example.com",
    //   },
    // });

    if (loginMode.value === LoginMode.Password) {
      // 密码登录
    }
  }
</script>

<template>
  <form class="border-box login-form">
    <label class="d-flex align-items-center rounded-1 login-input mb-3"
           :class="iptUserNameInfo.isFocus ? 'is-focus' : ''">
      <i v-if="userNameType === UserNameType.UserName"
         class="bi bi-person-fill ps-3 fs-4"></i>
      <i v-else-if="userNameType === UserNameType.Email"
         class="bi bi-envelope-fill ps-3 fs-4"></i>
      <i v-else-if="userNameType === UserNameType.Phone"
         class="bi bi-phone-fill ps-3 fs-4"></i>
      <input autocomplete="new-username"
             class="w-100 h-100 py-3 px-3"
             placeholder="用户名/邮箱/手机号"
             type="text"
             @blur="iptUserNameInfo.onFocusOut"
             @focus="iptUserNameInfo.onFocusIn"
             @input="onUserNameInput"
             v-model.trim="iptUserNameInfo.model" />
      <transition>
        <div v-if="userNameType !== UserNameType.UserName"
             class="flex-shrink-0 pe-3">
          <button class="py-1 px-2 input-button"
                  href="javascript:void(0)"
                  type="button"
                  @click.stop="onToggleLoginMode">
            <i class="bi bi-arrow-down-up me-1"></i>{{ loginMode === LoginMode.Password ? '验证码' : '密码' }}</button>
        </div>
      </transition>
    </label>
    <label class="d-flex align-items-center rounded-1 login-input mb-3"
           :class="iptPassWordInfo.isFocus ? 'is-focus' : ''">
      <i v-if="userNameType === UserNameType.UserName || loginMode === LoginMode.Password"
         class="bi bi-lock-fill ps-3 fs-4"></i>
      <i v-else
         class="bi bi-shield-lock-fill ps-3 fs-4"></i>
      <input autocomplete="new-password"
             class="w-100 h-100 py-3 px-3"
             :placeholder="userNameType === UserNameType.UserName || loginMode === LoginMode.Password ? '请输入密码' : '请输入验证码'"
             :type="userNameType === UserNameType.UserName || loginMode === LoginMode.Password ? 'password' : 'text'"
             @blur="iptPassWordInfo.onFocusOut"
             @focus="iptPassWordInfo.onFocusIn"
             v-model.lazy="iptPassWordInfo.model" />
      <transition>
        <div v-if="userNameType !== UserNameType.UserName && loginMode !== LoginMode.Password"
             class="flex-shrink-0 pe-3">
          <button class="py-1 px-2 input-button"
                  href="javascript:void(0)"
                  type="button"
                  @click.stop="doRequestCaptchaCode">发送验证码</button>
        </div>
      </transition>
    </label>
    <ipt-captcha v-if="loginMode === LoginMode.Password"
                 appId="123123123"
                 class="mb-3"
                 v-model="token"></ipt-captcha>
    <div class="mb-3">
      <label>
        <input type="checkbox" />
        我已阅读并同意《<a href="#">用户协议</a>》和《<a href="#">隐私政策</a>》
      </label>
    </div>
    <!-- <slider-bar appId="123123123"
                class="mb-2"
                :sideIcon="0"
                :type="2"
                v-model="token"></slider-bar>
    <slider-puzzle appId="123123123"
                   class="mb-2"
                   mode="popup"
                   :sideIcon="1"
                   theme="round"
                   v-model="token"></slider-puzzle> -->
    <button class="w-100 button-login"
            type="button"
            @click="doLogin">
      <i class="bi bi-box-arrow-in-right align-middle me-1"></i>
      登录
    </button>
  </form>
</template>

<style lang="scss" scoped>
  .login-form {
    max-width: 100%;
  }
  .login-input {
    outline-offset: 10px;
    outline: 5px solid transparent;
    background-color: var(--theme-gray-200);
    font-size: 14px;
    transition: all 0.2s ease-in-out;

    > input {
      background-color: transparent;
      border: none;
      outline: none;

      &::placeholder {
        color: var(--theme-gray-500);
      }
    }

    &.is-focus {
      outline-offset: 0;
      background-color: var(--theme-gray-100);
      outline-color: rgba(var(--theme-primary-rgb), 0.4);
    }
  }

  .button-login {
    --button-bg-color: var(--theme-secondary);
    --button-hover-bg-color: var(--theme-secondary-hover);
    --button-active-color: var(--theme-secondary-emphasis);
    --button-border-color: rgba(var(--theme-secondary-rgb), 0.4);
  }

  .input-button {
    --button-bg-color: transparent;
    --button-hover-bg-color: transparent;
    --button-color: var(--theme-primary);
    // --button-border-color: currentColor;

    font-size: 0.95em;
  }

  .v-enter-active,
  .v-leave-active {
    transition: all 0.1s ease-in-out;
    transform: scale(1);
  }

  .v-enter-from,
  .v-leave-to {
    transform: scale(0);
  }
</style>

<style lang="scss" scoped>
  @media (prefers-color-scheme: dark) {
    .login-input {
      background-color: var(--theme-gray-800);

      > input {
        color: var(--theme-white);
      }
    }
  }
</style>
